<template>
	<view class="pd24_20">
		<!-- <view v-if="isLogin == false" @click="showLoginAct" class="flex alcenter space">
			<view class="flex alcenter">
				<view class="member-face">
					<image class="face" :src="statics.defaultFace"></image>
				</view>
				<view class="ml15">
					<view class="ft16 cl-w">暂未登录</view>
					<view class="mt12 ft12 cl-notice">点击登录 享受更多会员特惠</view>
				</view>
			</view>
			<text class="iconfont iconicon_arrow_small ft12 cl-notice"></text>
		</view> -->
		<view class="flex end">
			<view class="btn-mini opsetads" @click="opset">
				<image mode="aspectFit" style="width: 100%; height: 100%;" src="/static/img/my/sz.png">
			</view>
		</view>
		

		<view class="flex alcenter space mt24">
			<view class="fl1">
				<view class="ft16 cl-w">{{ userinfo.nickname || '' }}</view>
				<view class="flex mt15">
					<view class="mr60 text-center">
						<view class="ft18 cl-w">{{userinfo.fabu}}</view>
						<view class="ft14 cl-notice">{{$t('play.fabu')}}</view>
					</view>
					<view class="text-center">
						<!-- <view class="ft18 cl-w">{{userinfo.guanzhu}}</view> -->
						<!-- <view class="ft14 cl-notice">{{$t('play.guanzhu')}}</view> -->
					</view>
				</view>
			</view>
			<view class="member-face">
				<image class="face" :src="avatar"></image>
			</view>
		</view>
		<view class="mt24" style="position: relative;">
			<image src="/static/creator/rechangeBg.png" class="bdr12" mode="aspectFill"
				style="width: 100%;height: 180rpx;"></image>
			<view class="goldBox  flex alcenter space bdr12 cl-w" @click="$u.route('pages/creator/user/coin/recharge')">
				<view>
					<view>CLIP{{$t('text.integral')}}</view>
					<view class="ft36 ftw600">{{userinfo.money}}</view>
				</view>
				<view class="rechangeBtn col3">
					<view class="mr5">{{$t('text.recharge')}}</view>
					<u-icon name="arrow-right" color="#fff" size="14"></u-icon>
				</view>
			</view>
		</view>

		<view class="bg-default1 bdr12 mt24">
			<view class="flex alcenter space pd15" v-for="(item,index) in getMenus" :key="index"
				@click="memberLinkTo(index,item.name)">
				<view class="flex alcenter">
					<image :src="item.icon" style="width: 64rpx;height: 64rpx;"></image>
					<text class="ml15 ft14 ftw500 cl-w">{{item.name}}</text>
				</view>
				<view class="cl-w">
					<u-icon name="arrow-right" color="#ffffff" size="14"></u-icon>
				</view>
			</view>
		</view>
		<!-- <view style="width: 100%; height: 30upx;"></view>
		<home-vipcard :userinfo="userinfo" @loginAct="showLoginAct" @qrcode="showQrcode = true"></home-vipcard>
		<view class="mt24">
			<home-banner :banners="banners"></home-banner>
		</view> -->
		<!-- <view class="flex wrap space mt16">
			<view v-for="(item,index) in getMenus" :key="index" :class="index > 1 ? 'mt16': ''">
				<view v-if="item.type == 'link'" :data-index="index" @click="memberLinkTo"
					class="box pd16_15 flex alcenter" style="width: 320rpx;">
					<image :src="item.icon" style="width: 64rpx;height: 64rpx;"></image>
					<text class="ml15 ft14 ftw500 cl-w">{{item.name}}</text>
				</view>
				<view v-else style="width: 320rpx;">
					<button class="box pd16_15 flex alcenter" :open-type="item.type"
						style="padding: 32rpx 30rpx; margin: 0;">
						<image :src="item.icon" style="width: 64rpx;height: 64rpx;"></image>
						<text class="ml15 ft14 ftw500 cl-w">{{item.name}}</text>
					</button>
				</view>
			</view>
		</view> -->
		<view style="height: 100rpx;"></view>
		<creatorTabBar :activeIndex="activeIndex" />
		<com-copyright></com-copyright>

		<!-- <com-footer model="member"></com-footer> -->

		<dialog-birthday v-if="showBirthday" @closed="showBirthday = false"></dialog-birthday>
		<dialog-login v-if="showLogin" @loginYes="loginYes" @closed="showLogin = false"></dialog-login>
		<dialog-qrcode v-if="showQrcode" @closed="showQrcode = false"></dialog-qrcode>
	</view>
</template>

<script>
	import creatorTabBar from '@/components/creatorTabBar/index.vue';
	export default {
		components: {
			creatorTabBar
		},
		data() {
			return {
				isLogin: false,
				showLogin: false,
				isBirthday: true,
				showBirthday: false,
				showQrcode: false,
				avatar: '',
				userinfo: [],
				banners: [],
				vipLevel: 0,
				iskq: 0,
				uid: 0,
				staticUrl: this.$config.staticUrl,
				memberMenus: [{
						name: this.$t('text.creator1'),
						type: 'link',
						model: '',
						link: '/pages/creator/user/releaseVideo/record',
						icon: this.$config.staticUrl + 'vipcard_icon_my_card@2x.png',
						show: 1
					},
					{
						name: this.$t('text.creator2'),
						type: 'link',
						model: '',
						link: '/pages/creator/user/releaseVideo/record',
						icon: this.$config.staticUrl + 'vipcard_icon_my_order@2x.png',
						show: 1
					},
					{
						name: this.$t('text.creator3'),
						type: 'link',
						model: '',
						link: '/pages/creator/user/releaseVideo/record',
						icon: this.$config.staticUrl + 'vipcard_love.png?v=1',
						show: 1
					},
					{
						name: this.$t('text.creator4'),
						type: 'link',
						model: '',
						link: '/pages/creator/user/team/profit',
						icon: this.$config.staticUrl + 'vipcard_icon_my_advise@2x.png',
						show: 1
					},
					{
						name: this.$t('text.creator5'),
						type: 'link',
						model: '',
						link: '/pages/creator/user/yanyuan',
						icon:  '/static/img/my/cikuguanli.png',
						show: 1
					},
					{
						name: this.$t('text.creator6'),
						type: 'link',
						model: 'index',
						link: '/pages/client/index',
						// icon: this.$config.staticUrl + 'qh.png',
						icon: this.$config.staticUrl + 'vipcard_icon_my_integral@2x.png',
						show: 1
					},
					// {
					// 	name: '数据分析',
					// 	type: 'link',
					// 	model: '',
					// 	link: '',
					// 	icon: this.$config.staticUrl + 'vipcard_icon_my_integral@2x.png',
					// 	show: 1
					// },
					// {name:'创作者入驻',type:'link',model:'',link:'/pages/creator/index',icon:'/static/img/my/vipcard_icon_my_creator@2x.png',show:1},
				],
				activeIndex: 2
			}
		},
		computed: {
			getMenus() {
				let arr = new Array;
				for (var a in this.memberMenus) {
					if (this.memberMenus[a].show == 1 || (this.iskq == 1 && this.memberMenus[a].show == 3)) {
						arr.push(this.memberMenus[a]);
					}
				}
				return arr;
			}
		},
		onLoad() {
			// console.log(this.$config.staticUrl,'this.$config.staticUrl');
			console.log(this.$config.staticUrl + 'vipcard_icon_my_card@2x.png');
			if (uni.getStorageSync("userinfo")) {
				this.uid = uni.getStorageSync("userinfo").id
			}
		},
		onShow() {
			if (uni.getStorageSync("userinfo").token) {
				this.isLogin = true;
				this.ongrzlTap();
			} else {
				this.isLogin = false;
			}
			this.banners = uni.getStorageSync("config").banner
			this.getList();
		},
		onShareAppMessage: function(res) {
			// #ifdef MP-WEIXIN
			var href = '/pages/login/login?fxpid=' + this.uid
			console.log(res)
			let that = this;
			const obj = {
				title: "发送给好友",
				imageUrl: '',
				path: href,
				success: function(res) {
					console.log(res, "转发成功")
				},
				fail: function(res) {
					wx.showToast({
						title: '发送失败',
						icon: 'none'
					})
				}
			}
			return obj
			// #endif
		},
		onShareTimeline(e) {

		},
		methods: {
			opset() {
				uni.navigateTo({
					url: '/pages/set/set'
				})
			},
			opsets() {
				uni.navigateTo({
					url: '/pages/set/grzl/grzl'
				})
			},
			async ongrzlTap() {
				let data = {};
				data.token = uni.getStorageSync("userinfo").token;
				data.uid = uni.getStorageSync("userinfo").id;
				uni.request({
					url: this.configs.webUrl + '/api/creator/index',
					data: data,
					success: res => {
						if (res.data.code == 1) {
							let ionfo = res.data.data
							ionfo.isLogin = true
							this.userinfo = ionfo
							this.iskq = this.userinfo.config.iskq
							uni.setStorage({ //缓存配置信息
								key: 'userinfo',
								data: res.data.data
							})
							if (res.data.data.avatar) {
								var str = res.data.data.avatar;
								if (str.indexOf("data:image") != -1) {
									this.avatar = '';
								} else {
									if (str.indexOf("http") != -1) {
										this.avatar = res.data.data.avatar;
									} else {
										this.avatar = this.configs.imgUrl + res.data.data.avatar;
									}
								}
							} else {
								this.avatar = '';
							}
							uni.setStorage({ //缓存配置信息
								key: 'avatar',
								data: this.avatar
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							});
						}
					},
					fail: (data, code) => {
						//console.log('fail' + JSON.stringify(data));
					}
				});
			},
			getList() {
				let data = {};
				var limit = 15;
				data.limit = limit
				data.ishot = 2
				uni.request({
					url: this.configs.webUrl + '/api/video/lists',
					data: data,
					success: data => {
						//console.log(data.data)
						uni.setStorage({ //缓存配置信息
							key: 'config',
							data: data.data.config
						})
						if (uni.getStorageSync("config").iskq) {
							this.iskq = uni.getStorageSync("config").iskq;
						}
					},
					fail: (data, code) => {}
				});
			},
			memberLinkTo(index, name) {
				if (this.isLogin == false && this.getMenus[index].model != 'integral') {
					this.showLogin = true;
				} else {
					if (this.getMenus[index].link != '') {
						if (this.getMenus[index].model == 'integral') {
							uni.redirectTo({
								url: this.getMenus[index].link
							})
						} else {
							if (index == 0 || index == 1 || index == 2) {
								uni.navigateTo({
									url: '/pages/creator/user/releaseVideo/record?titleName=' + name
								})
							} else {
								if (this.getMenus[index].model == 'index') {
									uni.reLaunch({
										url: this.getMenus[index].link
									})
								} else {
									uni.navigateTo({
										url: this.getMenus[index].link
									})
								}

							}
						}
					}
				}
			},
			birthdayAct() {
				if (this.isBirthday) {
					uni.navigateTo({
						url: '/pages/client/member/birthday'
					})
				} else {
					uni.navigateTo({
						url: '/pages/client/member/info'
					})
				}
			},
			showLoginAct() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			loginYes() {

			},
			outlogin() {
				uni.showModal({
					 content: this.$t('modal.content.logout'),
					success: (e) => {
						if (e.confirm) {
							uni.clearStorageSync();

							setTimeout(() => {
								this.isLogin = false;
								this.userinfo.isLogin = false
							}, 200)
						}
					}
				});
			}
		}
	}
</script>

<style>
	.opsetads {
		background: none;
		color: #000000;
		width: 50upx;
		line-height: 50upx;
		height: 50upx;
		text-align: center;
		border-radius: 100%;
		animation: rotate 10s linear infinite;
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg) skew(0deg) scale(1);
			-ms-transform: rotate(0deg) skew(0deg) scale(1);
			/* IE 9 */
			-moz-transform: rotate(0deg) skew(0deg) scale(1);
			/* Firefox */
			-webkit-transform: rotate(0deg) skew(0deg) scale(1);
			/* Safari  Chrome */
			-o-transform: rotate(0deg) skew(0deg) scale(1);
		}

		100% {
			transform: rotate(360deg) skew(0deg) scale(1);
			-ms-transform: rotate(360deg) skew(0deg) scale(1);
			/* IE 9 */
			-moz-transform: rotate(360deg) skew(0deg) scale(1);
			/* Firefox */
			-webkit-transform: rotate(360deg) skew(0deg) scale(1);
			/* Safari  Chrome */
			-o-transform: rotate(360deg) skew(0deg) scale(1);
		}
	}

	.member-face {
		position: relative;
	}

	.member-face .vip-level {
		height: 48rpx;
		width: 48rpx;
		position: absolute;
		left: calc(50% - 24rpx);
		top: -30rpx;
	}

	.member-face .face {
		width: 130rpx;
		height: 130rpx;
		border: 6rpx solid #1f1f1f;
		background: #000;
		border-radius: 100rpx;
		box-shadow: 0rpx 24rpx 24rpx 0rpx #1f1f1f;
	}

	.miniapp-icon {
		width: 48rpx;
		height: 48rpx;
		border-radius: 24rpx;
		background: #F2F2F2;
	}

	.box {
		background: #1f1f1f;
		box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 32rpx;
	}

	.goldBox {
		position: absolute;
		top: 0;
		width: 100%;
		opacity: 1;
		/* background: linear-gradient(133.93deg, #32E19F 0%, #05CDA9 100%); */
		padding: 30rpx 60rpx;
	}

	.rechangeBtn {
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 1;
		border-radius: 20px;
		border: 1px solid #fff;
		padding: 8rpx 0;
	}

	.bdr12 {
		border-radius: 12px;
	}
</style>